<template>
    <view v-if="visible" class="mask">
        <!-- <image :src="formData.img" class="edit-img" mode="aspectFill" /> -->

        <view class="tabs-boxs">

            <view class="tabs">
                <view class="tab" @click="tabIndex = 0" :class="{ active: tabIndex === 0 }">自定义</view>
                <view class="tab" @click="tabIndex = 1" :class="{ active: tabIndex === 1 }">选项</view>
            </view>

            <view class="tab-item" v-if="tabIndex === 0">
                <view class="input-field">
                    <view class="infos">
                        <text class="input-label">
                            修改内容：
                        </text>
                        <text class="input-label" @click="formData.all = ''">
                            清空
                        </text>
                    </view>

                    <textarea v-model="formData.all" class="edit-textarea" :adjust-position="false"
                        placeholder="请输入内容" />
                </view>
                <view class="tip-box">
                    <text v-for="(tip, i) in tips" :key="i" @click="addTip(tip)" class="tip">{{ tip }}</text>
                </view>
                <view class="num-box">
                    <text>数量：</text>
                    <text v-for="(num, i) in nums" :key="i" :class="{ active: num === formData.total }"
                        @click="formData.total = num" class="num">{{ num }}</text>
                </view>
            </view>

            <view class="tab-item" v-if="tabIndex === 1">
                <view class="input-field">
                    <text class="input-label">描述：</text>
                    <textarea v-model="formData.other" class="edit-textarea" :adjust-position="false"
                        placeholder="请输入内容" />
                </view>
                <view class="input-field fxs">
                    <text class="input-label">颜色：</text>
                    <input v-model="formData.colors" class="input-control" placeholder="颜色" />
                </view>
                <view class="input-field fxs">
                    <text class="input-label">体重：</text>
                    <switch :checked="formData.fat" @change="e => formData.fat = e.detail.value" />
                </view>
                <view class="input-field fxs">
                    <text class="input-label">年龄：</text>
                    <input v-model="formData.old" class="input-control" type="number" placeholder="年龄" />
                </view>
                <view class="input-field fxs">
                    <text class="input-label">鞋子：</text>
                    <switch :checked="formData.heel" @change="e => formData.heel = e.detail.value" />
                </view>
            </view>

            <view class="popup-btns">
                <button class="btn cancel" @click="closePopup">取消</button>
                <button class="btn confirm" @click="confirmEdit">确定</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, reactive, defineEmits } from 'vue';
const tabIndex = ref(1);
const tips = [
    "角色胖一点",
    "穿油亮光泽的黑色丝袜",
    "穿紫色修身V领镂空长袖T恤",
    "有点小肚子",
    "角色穿高跟鞋",
    "戴着化妆舞会面具",
    "穿黑色短裤",
    "转卡通水墨风格"
]
const nums = [1, 2, 3, 4, 5];
// const account = ref(1);
const visible = ref(false);
const defaultFormData = {
    img: '',
    fat: true,
    heel: true,
    old: 40,
    colors: '黑色 红色',
    other: '',
    all: '',
    total: 1
};
const formData = reactive(uni.getStorageSync('makePopupForm') || defaultFormData);

const emit = defineEmits(['confirm']);

const confirmEdit = () => {
    console.log(formData);
    uni.setStorageSync('makePopupForm', formData);
    const obj = { ...formData };
    if (tabIndex.value === 1) {
        obj.all = "";
    }
    if (!obj.old) {
        obj.old = 0
    }
    emit('confirm', obj);
    visible.value = false;
}

const addTip = (tip) => {
    formData.all = (formData.all || "") + tip + ",";
}
const closePopup = () => {
    visible.value = false;
};

const open = (url) => {
    formData.img = url;
    visible.value = true;
};

defineExpose({ open, close: closePopup });
</script>

<style lang="scss" scoped>
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mask {
    // background: #fff;
    // border-radius: 24rpx;
    // width: 600rpx;
    // box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.32);

    .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
    }

    .edit-textarea {
        width: 100%;
        height: 200rpx;
        border: 2rpx solid #dcdfe6;
        border-radius: 12rpx;
        padding: 20rpx;
        font-size: 28rpx;
        margin-bottom: 30rpx;
        margin-top: 12rpx;
        box-sizing: border-box;
    }

    .input-field {
        margin-bottom: 30rpx;

        .input-label {
            display: block;
            font-size: 28rpx;
            color: #333;
        }

        .input-control {
            width: 100%;
            height: 80rpx;
            border: 2rpx solid #dcdfe6;
            border-radius: 12rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            box-sizing: border-box;
            flex: 1;
        }
    }

    .popup-btns {
        display: flex;
        gap: 20rpx;
        background: #fff;
        padding: 20rpx;
        border-radius: 0 0 8rpx 8rpx;

        .btn {
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            border-radius: 8rpx;
            font-size: 28rpx;


            &.cancel {
                background: #f5f7fa;
                color: #666;
            }

            &.confirm {
                background: #409eff;
                color: #fff;
            }
        }
    }
}

.edit-img {
    width: 100%;
    height: 200rpx;
    margin-bottom: 30rpx;
}



.tabs-boxs {
    background: #ffcece;
    padding: 16rpx;
    box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.82);
    width: 600rpx;
    border-radius: 12rpx;
}

.tabs {
    display: flex;

    .tab {
        flex: 1;
        text-align: center;
        padding: 18rpx;
        border-radius: 10rpx 10rpx 0 0;
    }

    .active {
        background: #fff;
        color: #1e9ff5;
    }
}

.tab-item {
    background: #fff;
    padding: 28rpx;
}

.tip-box {
    margin: 10rpx 0;
    display: flex;
    gap: 10rpx;
    flex-wrap: wrap;

    .tip {
        background: #f5f7fa;
        border-radius: 12rpx;
        padding: 10rpx;
        font-size: 20rpx;
        color: #888;

        &:active {
            background: #dce0e6;
        }
    }

}

.num-box {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 20rpx;
    margin-top: 24rpx;

    .num {
        background: #999;
        border-radius: 12rpx;
        padding: 12rpx 24rpx;
        font-size: 20rpx;
        color: #fff;

        &.active {
            background: #1e9ff5;
        }
    }
}

.fxs {
    display: flex;
    align-items: center;
    gap: 20rpx;
}
.infos{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>